<template>
  <button
    @click="$emit('click')"
    :disabled="disabled"
    class="it-button"
    :class="[
    type ? `it-button--${type}` : 'it-button--default',
    { 'is-plain': plain},
    { 'is-round': round }
    ]"
  >
    <i v-if="icon" :class="`iconfont ${icon}`"></i>
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return (
          ['primary', 'info', 'text', 'success', 'warning', 'danger'].indexOf(
            value
          ) !== -1
        )
      }
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    }
  }
}
</script>

<style>
.it-button,
.it-button--default {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.it-button--primary {
  background-color: #5a9cf8;
  color: white;
}
.it-button--success {
  background-color: #7ec051;
  color: white;
}
.it-button--warning {
  background-color: #dda550;
  color: white;
}
.it-button--danger {
  background-color: #f56c6c;
  color: white;
}
.it-button--info {
  background-color: #929398;
  color: white;
}
.it-button--text {
  background-color: initial;
  border: none;
  color: #5a9cf8;
}

.is-plain.it-button--success {
  border-color: #C8E5B4;
  background-color: #F3F8EC;
  color: #7EC050;
}
.is-round {
  border-radius: 20px;
}
/* disabled伪类 */
.it-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
</style>
